<template>
  <el-dialog
    v-el-drag-dialog
    class="dailyCenter-DetailsDialog"
    title="日结明细"
    :visible.sync="isShow"
    width="1000px"
    @closed="close"
  >
    <lb-table
      ref="lbTable"
      v-loading="$loadingPlugin.fetchData"
      v-el-height-adaptive-table="{ bottomOffset: 10 }"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="column"
      :data="tableData"
      custom-column
    />
  </el-dialog>
</template>

<script>
  import { dailyCenterDetails, queryMap } from '@/api'
  import { formatColumnMap } from '@/utils'
  export default {
    data() {
      return {
        tableData: [],
        isShow: false,
        gdStatusMap: []
      }
    },
    computed: {
      column() {
        return [
          // {
          //   label: "结转单号",
          //   prop: "carryOverCode",
          //   width: 200,
          //   align: "center",
          //   formatter: this.formatter.fontFormat,
          //   hidden: true,
          // },
          {
            label: '商品类型',
            prop: 'gtName',
            width: 120,
            align: 'center'
          },
          {
            label: '商品名称',
            prop: 'goodsName',
            align: 'center'
          },
          {
            label: '规格型号',
            prop: 'specName',
            width: 100,
            align: 'center'
          },
          {
            label: '状态',
            prop: 'gdStatus',
            width: 80,
            align: 'center',
            render: (h, { row }) => (
            <span>
              {row.gdStatus &&
                formatColumnMap(this.gdStatusMap, 'value', row.gdStatus, 'desc')}
            </span>
          )
          },
          {
            label: '账面数量',
            prop: 'bookGdCount',
            width: 100,
            align: 'right',
            render: (h, { row }) => <span>{row.bookGdCount || 0}</span>
          },
          {
            label: '实际数量',
            prop: 'gdCount',
            width: 100,
            align: 'right',
            render: (h, { row }) => <span>{row.gdCount || 0}</span>
          },
          { label: '账面重量', prop: 'bookNetWeight', width: 100, align: 'right' },
          { label: '实际重量', prop: 'netWeight', width: 100, align: 'right' }
        ]
      }
    },
    methods: {
      show(row) {
        this.isShow = true
        this.getTableData(row)
      },
      close() {
        this.isShow = false
        this.tableData = []
      },
      // 获取表格数据
      async getTableData(row) {
        const parmas = {
          carryOverCode: row.carryOverCode
        }

        const { status, data } = await dailyCenterDetails(parmas)
        if (status === 200) {
          this.tableData = data
          if (!this.gdStatusMap.length && data.length) this.queryOptionsMap()
        }
      },
      // 获取状态的枚举数据
      async queryOptionsMap() {
        const { status, data } = await queryMap({ enumName: 'GdStatus' })
        if (status === 200) this.gdStatusMap = data
      }
    }
  }
</script>

<style lang="scss" scoped></style>
